<template>
    <div id="permissionManage">
        <el-button type="success" style="margin-bottom:10px"
        @click="showAddNew=true,parentid=0,parentDesc=''"
        >
            新增权限
        </el-button>
        <el-collapse accordion>
            <el-collapse-item  v-for="(item,key,index) in allPermissions" 
            :key="key"
            :name="index"
            :title="item.permissionDesc"
            style="text-align:left;"
            >
                <template slot="title">
                    <div class="permissionTitle">
                        {{item.permissionDesc}}
                        <el-button type="danger" size="mini" @click.stop="deletePermission(item._id)">删除</el-button>
                    </div>
                </template>
               <ul>
                   <li style="margin-left:10px;margin-bottom:10px">
                       <el-button type="primary" 
                        size="mini"
                        @click="showAddNew=true,parentid=item._id,parentDesc=item.permissionDesc"
                       >
                        新增权限
                       </el-button>
                    </li>
                   <li v-for="(permission,permissionKey) in item.children" 
                   :key="permissionKey"
                   style="padding-left:10px"
                   >
                       {{permission.permissionDesc}}
                   </li>
               </ul>
            </el-collapse-item>
        </el-collapse>
        <add-new-perssmin 
        :showAddNew="showAddNew" 
        :parentid="parentid"
        :parentDesc="parentDesc"
        />
    </div>
</template>
<script>
import AddNewPerssmin from './AddNewPermission'
export default {
    components:{AddNewPerssmin},
    data(){
        return {
            activeName: '2',
            showAddNew: false,
            parentid: 0,
            parentDesc:''
        }
    },
    methods: {
        deletePermission(id){
            var action = ()=>{
                this.$http.post(this.$apis.deletePermissionById,{_id:id})
                .then((resp)=>{
                    this.$message({
                        message: resp.data.message,
                        type: resp.data.success?"success":"danger"
                    });
                    if(resp.data.success){
                        this.$store.dispatch('loadAllPermission')
                    }
                })
            }
            this.operatorConfirm(action,'删除权限');
        }
    },
    computed:{
        allPermissions(){
            return this.$store.getters.allPermissions;
        }
    },
    mounted(){
        this.$store.dispatch('loadAllPermission')
    }
}
</script>
<style lang="scss" scoped>
    #permissionManage{
        width: 100%;
        height: 100%;
        text-align: left;
    }
     #permissionManage /deep/.el-collapse-item__header{
        padding-left: 10px;
    }
    .permissionTitle{
        display: flex;
        justify-content: space-between;
    }
</style>
